<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>使用额外配置的示例</title>
<link rel="stylesheet" type="text/css" href="http://docs.kissyui.com/kissy-dpl/base/build/css/dpl-pkg.css"/>
<link rel="stylesheet" type="text/css" href="assets/demo.css"/>
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy.js" charset="utf-8"></script>
</head>
<body>
<article id="doc">
    <h4>使用额外配置的示例</h4>
    <p>data-config的配置主要是针对Uploader类（有部分是传给Button的，比如参数name），可以满足基础需求。但有些场景你需要有个通道可以把参数直接传给Button或Theme，这时该如何处理呢？</p>
    <p>RenderUploader支持通过增加伪属性的方式，额外给子类（Button、Queue）传递参数。</p>
    <p>比如你要给Button传递参数，可以增加data-button-config='{}'。</p>
    <p>来看下面的demo：</p>
    <!-- 上传按钮，组件配置请写在data-config内 -->
    <a id="J_UploaderBtn" class="g-u uploader-button"
       data-config='{"type" : "ajax",
                    "autoUpload" : false,
                    "serverConfig":{"action":"upload.php","data":{"dir":"files/"},"dataType" : "json"},
                    "name":"fileInput",
                    "urlsInputName":"fileUrls"}'
       data-button-config='{"disabled":true,"name":"Filedata","multiple":false}'
       data-theme-config='{"elUploadFiles":"#J_UploadAll"}'
       href="#">
        选择要上传的文件
    </a>
    <!-- 文件上传队列 -->
    <ul id="J_UploaderQueue" data-queue-config='{"duration":0.5}'>

    </ul>
    <div class="btn-wrapper">
        <input id="J_Disabled" name="disabled" type="checkbox" value="1" checked />
        <label for="disabled">禁用按钮</label>
        <input id="J_Multiple" name="multiple" type="checkbox" value="1" />
        <label for="multiple">开启多选</label>
        <input id="J_UploadAll" type="button" value="上传所有等待的文件">
    </div>
    <h4>data-button-config</h4>
    <p>给选择上传按钮增加几个配置：禁用按钮、文件上传域名为Filedata、禁用多选。</p>
    <pre class='brush: xml;'>
        data-button-config='{"disabled":true,"name":"Filedata","multiple":false}'
    </pre>
    <h4>data-theme-config</h4>
    <p>传递参数给模板，有些模板有可定制的参数，比如一些按钮的钩子之类的，看下面的代码：</p>
    <pre class='brush: xml;'>
        data-theme-config='{"elUploadFiles":"#J_UploadAll"}'
    </pre>
    留意：在demo代码中，并没有给id为J_UploadAll的按钮绑定事件，但依旧可以触发文件批量上传，那是因为，默认模板会监测elUploadFiles参数是否存在，在存在的情况下会自动绑定事件。
    <h4>data-queue-config</h4>
    <p>留意：这个属性是加在queue对应的目标元素上，比如demo中加在id="J_UploaderQueue"的ul上。</p>
    <pre class='brush: xml;'>
        <ul id="J_UploaderQueue" data-queue-config='{"duration":0.5}'>

        </ul>
    </pre>
    <p>demo中配置很简单，修改下queue添加和删除文件时动画速度。</p>
    <p>留意：queue有个参数名为statusConfig，通过传递这个参数，可以控制Status类的配置。</p>
</article>
<script>
    var S = KISSY,$ = S.Node.all;
    S.config({
        packages:[
            {
                name:"gallery",
                path:"http://a.tbcdn.cn/s/kissy/",
                charset:"utf-8"
            }
        ]
    });
    //加载上传组件入口文件
    KISSY.use('gallery/form/1.0/uploader/index', function (S, RenderUploader) {
        //第一个参数：按钮元素钩子，第二个参数：队列元素钩子
        var ru = new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue');
        //对组件的后续操作务必放在init事件内，因为组件时可能需要异步加载模板
        ru.on("init", function (ev) {
            var uploader = ev.uploader,
                //上传按钮实例
                button = uploader.get('button');
            $('#J_Disabled').on('change',function(ev){
                var isChecked = $(ev.target).prop('checked');
                button.set('disabled',isChecked);
            });
            $('#J_Multiple').on('change',function(ev){
                var isChecked = $(ev.target).prop('checked');
                button.set('multiple',isChecked);
            });
        })
    })
</script>

<!-- 代码高亮 START  -->
<link href='./assets/syntaxhighlighter_3.0.83/sh.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="./assets/syntaxhighlighter_3.0.83/sh.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<!-- 代码高亮 END  -->
</body>
</html>
